<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX练习</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<style>
    .news{
        width: 1000px;
        margin: 20px auto;
        text-align: center;
    }

    .content{
        text-indent: 40px;
        line-height: 30px;
    }

    .img{
        width: 300px;
    }


</style>
<body>
    <div id="root"></div>


</body>
<script type="text/babel">

    
    let data = {
        title:"中国特色强军之路的时代答卷",
        content:`党的十八大以来，中国特色社会主义进入新时代，国防和军队建设也进入新时代。
                人民军队这十年，是浴火重生的十年，是强军兴军的十年，是阔步迈向世界一流的十年。
                进入新时代，习近平主席站在统筹“两个大局”的战略高度，鲜明提出党在新时代的强军目标，确立新时代军事战略方针，制定到2027年实现建军一百年奋斗目标、到2035年基本实现国防和军队现代化、到本世纪中叶全面建成世界一流军队的国防和军队现代化新“三步走”战略，引领人民军队在中国特色强军之路上阔步前行，为实现中华民族伟大复兴提供了坚强有力的战略支撑。`,
        image:"https://img-xhpfm.xinhuaxmt.com/News/202209/dcc1c14968f646d48caec00fcdc8acb8.jpg?x-oss-process=image/resize,w_1000/auto-orient,1/quality,Q_80"
    }

    //创建虚拟dom 对象
    let vdom =  <div className="news">

            <h2 style={{color:"red",fontSize:"30px",textAlign:"center"}}>{data.title}</h2>
            <hr />
            <p className="content">{data.content}</p>
            <img className="img" src={data.image} alt="" />

           
        </div>


       
        
    
        //渲染虚拟dom
    ReactDOM.render(vdom,document.getElementById("root"));
    
    

/* 
    JSX注意点
        1. 不能用引号包裹,可以用 (小括号) 包裹
        2. JSX 与 js  拼接式,需使用 {}
        3. JSX 设置 class 时,须使用 className
        4. JSX 设置 style 时,须使用 {{color:"red",textAlign:"center",fontSize:"30px"}}   形式, css样式 多单词 须使用 小驼峰形式
        5. JSX 必须要有根标签
        6. JSX 中的单标签必须闭合,  例: <img/> <hr/> <br/> <input/> 等,或者<img><img/>形式
        7. JSX 中的标签名
            (1) 小写字母开头,则到HTML中找对应的标签,找到则创建,找不到则报错;
            (2) 大写字母开头,则到React中找对应的组件,找到则创建,找不到则报错;
            (3) 如果编写的html标签,则标签名首字母[一定要小写];如果编写的时React组件,则标签名首字母[一定要大写]
*/
 </script>
</html>